<template>
  <div class="video_container">
    <video class="video-item video-js" id="myVideo" controls="controls" ref="video" preload="preload" objectFit="contain">
      <source :src="currentUrl" type="video/mp4">
    </video>
  </div>
</template>
<style scoped>
.video-item {
  width: 80%;
  height: 80%;
  margin: 4% auto;
}
</style>
<script>

import path from '@/network'
import "video.js/dist/video-js.css";
import "vue-video-player/src/custom-theme.css";
export default {
  name: 'App',
  data () {
    return {
      list: [],
      currentIndex: 0,
      currentUrl: "",
      currentTitle: '',
      // basePath: 'http://192.168.1.26:8001/'
    }

  },

  mounted () {
    this.getVideolist()
    document.getElementById('myVideo').loop = false;
    document.getElementById('myVideo').addEventListener('ended', () => {
      if (this.currentIndex < this.list.length - 1) {
        this.currentIndex++;
        this.currentUrl = this.list[this.currentIndex].resourceUrl
        this.currentTitle = this.list[this.currentIndex].chapterName
        this.playVideo(this.currentUrl)
      }

    }, false)
  },
  methods: {
    //获取list
    getVideolist () {
      path.getVideolist().then(res => {
        if (res.success == 0) {
          this.list = res.rows;
          this.currentUrl = this.list[this.currentIndex].resourceUrl
          this.playVideo(this.currentUrl)
        }
      })
    },
    playVideo (src) {
      let video = document.getElementById('myVideo')
      video.src = src
      video.play()
    }
  }
}

</script>